<style>
  .dn {
    display: none;
  }

  .attachments {
    display: block;
    float: left;
    overflow: hidden;
    text-align: center;
  }

  .option-item {
    overflow: hidden;
    margin-top: 5px;
    color: #1E9FFF;
    text-align: center;
  }

  .preview {
    cursor: pointer;
  }

  .file-a {
    font-size: 12px;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 5px;
  }

  .cardU {
    /*background-image: url(../../assets/images/card_u.png);*/
    background-repeat: no-repeat;
    background-position: center;
    width: calc(100% - 152px);
    height: 150px;
    padding: 0;
  }

  .cardU img {
    width: 100%;
    height: 100%;
  }
  #warehouseProductMarkFormCss .layui-input-block{
    margin-left: 145px;
  }
  #warehouseProductMarkFormCss .layui-form-label{
    width: 115px;
  }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">
              <div class="query-lt">
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">牌号名称：</label>
                  <div class="layui-input-inline mr0">
                    <input name="markName" class="layui-input" type="text"
                           placeholder="请输入名称"/>
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">牌号编码：</label>
                  <div class="layui-input-inline mr0">
                    <input name="markCode" class="layui-input" type="text"
                           placeholder="请输入编码"/>
                  </div>
                </div>
                <div class="layui-inline">
                  <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog"
                          lay-submit layui-form-keyDownSearch="true">查询
                  </button>
                  <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置
                  </button>
                </div>
              </div>
              <div class="query-rt"></div>
            </div>
          </div>
        </div>
        <div class="lay-btn-rows">
          <div class="lay-btn-box">
            <div class="lay-btn-lt">
              <button id="warehouseBtnAdd" class="layui-btn icon-btn color-reseda">添加</button>
            </div>
            <div class="lay-btn-rt">
            </div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <table class="layui-table" id="warehouseTable" lay-filter="warehouseTable"></table>
    </div>
  </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="warehouseTableBar">
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="pricing">加工计价维护</a>
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="warehouseProductMarkForm">
  <form lay-filter="warehouseProductMarkForm" id="warehouseProductMarkFormCss" class="layui-form open-form">
    <input name="id" type="hidden"/>
    <div class="open-model">
      <div class="open-auto">
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>牌号名称</label>
            <div class="layui-input-block">
              <input id="markName" name="markName" placeholder="请输入牌号名称" type="text" class="layui-input" maxlength="200" lay-verify="required|isOnlyName" required autocomplete="off"/>
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>编码</label>
            <div class="layui-input-block">
              <input id="markCode" name="markCode" placeholder="请输入编码" type="text" class="layui-input" maxlength="200" lay-verify="required" required autocomplete="off"/>
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">托管指导价</label>
            <div class="layui-input-block">
              <input id="contractPrice" name="contractPrice" placeholder="请输入合同价格" type="number" lay-affix="number" class="layui-input" maxlength="200" autocomplete="off"/>
            </div>
          </div>
        </div> <div class="layui-col-xs6">
        <div class="layui-form-item">
          <label class="layui-form-label">加工指导价(元/吨)</label>
          <div class="layui-input-block">
            <input id="memberPrice" name="memberPrice" placeholder="请输入会员价格" type="number" lay-affix="number" class="layui-input" maxlength="200" autocomplete="off"/>
          </div>
        </div>
      </div>


        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
              <input id="remark" name="remark" placeholder="备注" type="text" maxlength="200" class="layui-input" autocomplete="off"/>
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>密度(mm³)</label>
            <div class="layui-input-block">
              <input id="density" name="density" placeholder="密度" type="text" maxlength="200" class="layui-input" lay-verify="required" required autocomplete="off"/>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="warehouseFormSubmit" lay-submit>保存</button>
      </div>
    </div>
  </form>
</script>


<!-- js部分 -->
<script>

  var $, config;

  function stopBubbling(e) {
    e = window.event || e;
    if (e.stopPropagation) {
      e.stopPropagation();      //阻止事件 冒泡传播
    } else {
      e.cancelBubble = true;   //ie兼容
    }
  }

  //预览
  function previewImg(index) {
    stopBubbling(this);

    var obj = $(index).parent().prev().prev();
    var img = new Image();
    img.src = obj.attr("src");
    var height = img.height; //获取图片高度
    var width = img.width; //获取图片宽度
    if (width > 1000) {
      height = 1000 / width * height;
      width = 1000;
      if (height > 800) {
        width = 800 / height * width;
        height = 800;
      }
    }
    if (height > 800) {
      width = 800 / height * width;
      height = 800;
    }

    var imgHtml = "<img src='" + obj.attr("src") + "' style='width: " + width + "px; height: " + height + "px;' />";
    //弹出层
    layer.open({
      type: 1,
      shade: 0.8,
      offset: 'auto',
      area: [width + 'px', (height + 50) + 'px'],
      shadeClose: true,//点击外围关闭弹窗
      scrollbar: false,//不现实滚动条
      title: "图片预览", //不显示标题
      content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
      cancel: function () {
        //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
      }
    });
  }

  layui.use(['layer', 'form', 'table', 'admin', 'laytpl', 'upload'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var config = layui.config;
    var admin = layui.admin;
    var upload = layui.upload;
    var laytpl = layui.laytpl;

    // 渲染表格
    var insTb = table.render({
      elem: '#warehouseTable',
      url: config.base + 'warehouse/warehouse/admin/productMark/list',
      page: true,
      cellMinWidth: 100,
      cols: [[
        {field: 'markCode', align: 'center', title: '牌号编码', width: 150}
        , {field: 'markName', align: 'center', title: '牌号名称', width: 150}
        , {field: 'memberPrice', align: 'center', title: '会员价格', width: 150}
        , {field: 'contractPrice', align: 'center', title: '合同价格', width: 150}
        , {field: 'remark', align: 'center', title: '备注'}
        , {field: 'density', align: 'center', title: '密度'}
        // , {field: 'creatorName', align: 'center', title: '创建人', width: 140}
        // , {field: 'createTime', align: 'center', title: '创建时间', width: 180}
        , {align: 'center', toolbar: '#warehouseTableBar', title: '操作', width: 240, fixed: 'right'}
      ]]
    });

    // 工具条点击事件
    table.on('tool(warehouseTable)', function (obj) {
      var data = obj.data;
      if (obj.event === 'edit') { //修改
        showEditModel(data);
      } else if (obj.event === 'del') { // 删除
        doDelete(obj);
      }else if(obj.event==='pricing'){
        showPricingModel(data);
      }
    });

    //监听排序
    table.on('sort(warehouseTable)', function (obj) {
      table.reload('warehouseTable', {
        initSort: obj
        , where: {
          sort: obj.field
          , order: obj.type
        }
      });
    });

    // 搜索
    form.on('submit(formSubSearchLog)', function (data) {
      insTb.reload({where: data.field, page: {curr: 1}}, 'data');
    });

    // 重置搜索
    form.on('submit(resets)', function (data) {
      $(".lay-header").find('select').val("");
      $(".lay-header").find('input').val("");
      let field = data.field;
      for (let key in field) {
        field[key] = ''
      }
      insTb.reload({where: field, page: {curr: 1}}, 'data');
    });

    // 添加按钮点击事件
    $('#warehouseBtnAdd').click(function () {
      showEditModel();
    });
    /*价格维护*/
    function showPricingModel(data){
      admin.formOpen({
        area: ["90%", "90%"],
        offset: ["7%", "7%"],
        title: '牌号价格维护',
        path: "components/warehouseFactory/product/warehouseProductMarkForm.html",
        success: function () {
          if(data){
            parentData.data=data
          }
        }
      })
    }

    // 显示编辑弹窗
    function showEditModel(data) {

      console.info(data, 9090);

      admin.open({
        type: 1,
        area: '900px',
        offset: '120px',
        title: data ? '修改牌号' : '添加牌号',
        content: $('#warehouseProductMarkForm').html(),
        success: function () {
          form.val('warehouseProductMarkForm', data);
          // 表单提交事件
          form.on('submit(warehouseFormSubmit)', function (d) {
            d.field.contractPrice=Number(d.field.contractPrice)
            d.field.memberPrice=Number(d.field.memberPrice)
            layer.load(2);
            admin.req(data ? 'warehouse/warehouse/admin/productMark/update' : 'warehouse/warehouse/admin/productMark/add', JSON.stringify(d.field), function (res) {
              layer.closeAll('loading');
              if (res.code == 200) {
                layer.msg(res.msg, {icon: 1});
                table.reload('warehouseTable');
                layer.closeAll('page');
              } else {
                layer.msg(res.msg, {icon: 2});
              }
            }, data ? 'PUT' : 'POST',true,"application/json;charset=utf-8");
            return false;
          });

          upload.render({
            elem: '#pictureDiv'
            , url: config.upload_url + 'upload?path=' + img_path
            , auto: true
            , acceptMime: 'image/*'
            , headers: {authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
              layer.closeAll('loading');
              layer.msg('上传成功');
              var imgUrl = res.data.url;
              // if(imgUrl){
              //     imgUrl=imgUrl.substring(imgUrl.indexOf('/')+1)
              // }
              //上传完毕回调
              $("#pictureDiv").html('<img src="' + imgUrl + '" alt="上传成功后渲染" style="max-width: 196px"><input type="hidden" name="picture" value="' + imgUrl + '">');
            }
            , error: function (data) {
              layer.closeAll('loading');
            }
          });

          if (data != undefined) {
            var picture = data.picture;
            if (picture) {
              $("#pictureDiv").html('<img src="' + picture + '" alt="上传成功后渲染" style="max-width: 196px"><input type="hidden" name="picture" value="' + picture + '">');
            }
            form.val('warehouseForm', data);
          }

        }
      });
    }

    // 删除
    function doDelete(obj) {
      layer.confirm('确定要删除吗？', {
        offset: '65px',
        skin: 'layui-layer-admin'
      }, function (i) {
        layer.close(i);
        layer.load(2);
        admin.req('warehouse/warehouse/admin/productMark/' + obj.data.id, {}, function (res) {
          layer.closeAll('loading');
          if (res.code == 200) {
            layer.msg(res.msg, {icon: 1});
            obj.del();
          } else {
            layer.msg(res.msg, {icon: 2});
          }
        }, 'DELETE');
      });
    }

  });
</script>